// 在此处添加你的JavaScript代码

/* 示例JavaScript结构：

// DOM元素
const cardsGrid = document.querySelector('.cards-grid');
const filterBtns = document.querySelectorAll('.filter-btn');
const loadMoreBtn = document.querySelector('.btn-load');

// 示例数据
const products = [
    {
        id: 1,
        title: '智能手表',
        description: '新一代智能手表，支持心率监测和运动追踪',
        price: 299,
        category: 'tech',
        image: 'path/to/watch.jpg',
        size: '1x1'
    },
    // 添加更多产品...
];

// 创建卡片元素
function createCard(product) {
    const card = document.createElement('div');
    card.className = `card ${product.size === '2x1' ? 'card-wide' : product.size === '2x2' ? 'card-large' : ''}`;
    card.setAttribute('data-category', product.category);
    
    card.innerHTML = `
        <div class="card-image">
            <img src="${product.image}" alt="${product.title}">
            <span class="category">${product.category}</span>
        </div>
        <div class="card-content">
            <h3 class="card-title">${product.title}</h3>
            <p class="card-description">${product.description}</p>
            <div class="card-footer">
                <span class="price">¥${product.price}</span>
                <button class="btn">查看详情</button>
            </div>
        </div>
    `;
    
    return card;
}

// 渲染卡片
function renderCards(products) {
    cardsGrid.innerHTML = '';
    products.forEach(product => {
        const card = createCard(product);
        cardsGrid.appendChild(card);
    });
}

// 筛选功能
function filterCards(category) {
    const filteredProducts = category === 'all' 
        ? products 
        : products.filter(product => product.category === category);
    renderCards(filteredProducts);
}

// 加载更多
function loadMore() {
    // 模拟加载更多数据
    const newProducts = [
        // 添加新产品...
    ];
    products.push(...newProducts);
    renderCards(products);
    
    // 如果没有更多数据，禁用按钮
    if (products.length >= 20) {
        loadMoreBtn.disabled = true;
        loadMoreBtn.textContent = '没有更多数据';
    }
}

// 图片加载处理
function handleImageLoad() {
    const images = document.querySelectorAll('.card-image img');
    images.forEach(img => {
        img.addEventListener('load', () => {
            img.classList.add('loaded');
        });
        
        img.addEventListener('error', () => {
            img.src = 'path/to/fallback-image.jpg';
        });
    });
}

// 事件监听
filterBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        filterBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        filterCards(btn.dataset.filter);
    });
});

loadMoreBtn.addEventListener('click', loadMore);

// 初始化
renderCards(products);
handleImageLoad();

// 可选：添加无限滚动
function handleInfiniteScroll() {
    const observer = new IntersectionObserver(entries => {
        const lastEntry = entries[0];
        if (lastEntry.isIntersecting) {
            loadMore();
        }
    });
    
    observer.observe(loadMoreBtn);
}

// 可选：添加拖拽排序
function enableDragSort() {
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
        card.setAttribute('draggable', true);
        card.addEventListener('dragstart', handleDragStart);
        card.addEventListener('dragover', handleDragOver);
        card.addEventListener('drop', handleDrop);
    });
}

function handleDragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.dataset.id);
    e.target.classList.add('dragging');
}

function handleDragOver(e) {
    e.preventDefault();
}

function handleDrop(e) {
    e.preventDefault();
    const draggedId = e.dataTransfer.getData('text/plain');
    const draggedCard = document.querySelector(`[data-id="${draggedId}"]`);
    const dropTarget = e.target.closest('.card');
    
    if (draggedCard && dropTarget) {
        const temp = document.createElement('div');
        dropTarget.parentNode.insertBefore(temp, dropTarget);
        draggedCard.parentNode.insertBefore(dropTarget, draggedCard);
        temp.parentNode.insertBefore(draggedCard, temp);
        temp.remove();
    }
    
    draggedCard.classList.remove('dragging');
}

*/
